
<form id="Form" method="post" action="<?echo base_url().'index.php/factores/guardar_perfil'?>">
	<input name="id_perfil" type="hidden" value="<?=$info['id_perfil'];?>"/>
		<div class="panel with-nav-tabs panel-info">
		  <div class="panel-heading">
			<div class="right-content">
				<button class="btn btn-info btn-rounded-lg to-collapse" data-toggle="collapse" data-target="#panel-collapse-2"><i class="fa fa-chevron-up"></i></button>
			</div>
			<ul class="nav nav-tabs">
				<li class="active"><a href="#panel-1" data-toggle="tab">General</a></li>
				<li><a href="#panel-2" data-toggle="tab">Preguntas</a></li>
			</ul>
		  </div>
			<div id="panel-collapse-2" class="collapse in">
			  <div class="panel-body">
				<div class="tab-content">
					<div class="tab-pane fade in active" id="panel-1">


						<div class="row">
							<div class="form-group col-lg-4">							
								<label>Titulo de perfil</label>
								<input type="text" class="form-control" name="nombre" value="<?=$info['nombre']?>">
							</div>
						</div><!-- /.row -->
						<div class="row">
							<div class="form-group col-lg-7">
								<label>Descripción</label>
								<textarea class="form-control" style="height: 100px;" name="descripcion" > <?=$info['descripcion']?></textarea>
							</div>
						</div><!-- /.row -->
						<div class="row">
							<ul class="pager wizard">			
								<li class="PrevStep"><button class="btn btn-default " type="button">Anterior</button></li>
							  	<li class="NextStep"><button class="btn btn-default " type="button">Siguiente</button></li>
							</ul>	
						</div>		  						

	
					</div><!-- /#panel-1 -->
					<div class="tab-pane fade" id="panel-2">
							<div class="row">
								<p style="padding:20px;">
									<button type="button" class="btn btn-default" data-toggle="modal" data-target="#Modal-local" id="btn-nuevo-local" onclick="cargar_dialogo(1,0)"><i class="fa fa-plus-circle"></i>Agregar</button>	

								</p>								
							</div>
							<div class="table-responsive row">
								<div class="col-lg-9">
							<table class="table table-th-block table-info" id="tabla-dinamica">
								<thead>
									<tr>
										<th>N°</th>
										<th>Factor</th>
										<th>Pregunta</th>
										<th>Ponderación</th>
										<th>Opciones</th>
									</tr>
								</thead>
								<tbody>
									
								</tbody>
							</table>
							</div>

						</div><!-- /.table-responsive -->
							<div class="row"><!--row -->
								<div class="form-group">
									<label class="control-label col-lg-3 "><strong>El total de puntos debe de ser igual a 500</strong></label> 
								</div>
							</div>
							<div class="row">
				    			<ul class="pager wizard">			
									<li class="PrevStep"><button class="btn btn-default " type="button">Anterior</button></li>			
									<li><button class="btn btn-info " type="submit" id="btn-guardar-todo">Guardar</button></li>
								</ul>	
							</div>		
						</div><!--/.row -->
							<!-- En este div se guardaran todos aquellos id que fueron eliminados  -->   
								 <div class="oculto" id="eliminados"></div>

					</div><!-- /.tab-pane fade -->
				</div><!-- /.tab-content -->
			  </div><!-- /.panel-body -->
				<div class="panel-footer">

				</div>
			</div><!-- /.collapse in -->
		</div>
	</form>

						
                    <!-- Modal -->
                    <div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" id="Modal-local" >
						<!-- Modal --> 
						<form id="form-local">
					  <div class="modal-dialog">

						<div class="modal-content modal-no-shadow">
						  <div class="modal-header bg-dark no-border">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="cerrar-dialogo">&times;</button>
							<h4 class="modal-title">Preguntas</h4>
						  </div>
						  <div class="modal-body">													
								<input type="hidden" id="id_pregunta"/>
								<fieldset>
									<div class="row"><!-- row -->
										<div class="form-group">
											<label class="col-lg-3 control-label">Pregunta</label>
											<div class="col-lg-7">
												<textarea class="form-control bold-border col-lg-6" name="pregunta" id="pregunta"></textarea>
											</div>
										</div>
									</div><br><!--/.row -->
									<div class="row"><!--row -->
										<div class="form-group">
											<label class="control-label col-lg-3 ">Factor</label> 
											<div class="col-lg-7">
												<select class="form-control" name="factor" id="factor">								
															<option value=""></option>
													 <?php foreach($factores as $val) { ?>
									                         <option value="<?=$val['id_factor']?>" <?php 													                         
									                         echo '>'.$val['factor'] ?></option>
								                        <?php   
								                            }
								                        ?>
												</select>
											</div>
										 </div>
									</div><br><!--/.row -->
										<div class="row"><!--row -->
										<div class="form-group">
											<label class="control-label col-lg-3 ">Ponderacion</label> 
											<div class="col-lg-3">
												<input class="form-control" name="ponderacion" id="ponderacion"></input>
											</div>
										 </div>
									</div><!--/.row -->
								</fieldset>

						  </div><!--/.modal-body -->
						  <div class="modal-footer">
							<button type="button" class="btn btn-info" id="btn-guardar" onclick="guardar_local()">Guardar</button>
							<button type="button" class="btn btn-default" data-dismiss="modal" onclick="cerrar_local()">Cancelar</button>
						  </div><!-- /.modal-footer -->
						</div><!-- /.modal-content .modal-no-shadow -->

					  </div><!-- /.modal-dialog -->							
				
					<!-- Modal -->
						</form>
                    </div><!-- /#Modal --> 
                    <!-- Modal -->   
						

<script type="text/javascript">

	var	preguntas=<?php echo $preguntas;?>;
	var accion;
	var index;

		function cargar_dialogo(acc, ind) {
				accion=acc;
				index=ind;
			if (accion==2) { //en caso de modificar
				editPregunta();
			} 
		}
		function cerrar_local () {
			$('#cerrar-dialogo').click();
    		$('#form-local').bootstrapValidator('resetForm', true);	

		}

    	function guardar_local() {
    		if (accion==2) {
    			modificar_local();
    		} else{
    			addPregunta();            			
    		}
    		cerrar_local();
    		mostrar_tabla();
    	
    	}
    	function modificar_local() { 
    			preguntas[index].pregunta=$('#pregunta').val();
				preguntas[index].id_factor=$('#factor').val();
				preguntas[index].factor=$('#factor option:selected').text();
				preguntas[index].ponderacion=$('#ponderacion').val();
				preguntas[index].id_pregunta=$('#id_pregunta').val();
    	}
    	function eliminar_local(ind) {
    		$('#eliminados').html($('#eliminados').html()+'<input name="eliminados[]" value="'+preguntas[ind].id_pregunta+'" type="hidden" />');
    		delPregunta(ind);

    	}
    	function mostrar_tabla () {
    			$('#tabla-dinamica tbody').empty();
    			var html="";
    			var j=1;
    			total=0
    			for (var i = 0; i < preguntas.length; i++) {
    				total+=Number(preguntas[i].ponderacion);
    				input1='<input name="factores[]" value="'+preguntas[i].id_factor+'" type="hidden"></input>';
    				input2='<input name="preguntas[]" value="'+preguntas[i].pregunta+'" type="hidden"></input>';
    				input3='<input name="ponderaciones[]" value="'+preguntas[i].ponderacion+'" type="hidden"></input>';
    				input4='<input name="id_preguntas[]" value="'+preguntas[i].id_pregunta+'" type="hidden"></input>';
					fila='<tr>  '+
							'<td>'+j+input1+input2+input3+input4+'</td>'+
							'<td>'+preguntas[i].factor+'</td>'+
							'<td>'+preguntas[i].pregunta+'</td>'+
							'<td>'+preguntas[i].ponderacion+'</td>'+
							'<td><button class="btn btn-default btn-xs" type="button" data-toggle="modal" data-target="#Modal-local"  onclick="cargar_dialogo(2,'+i+')"><i class="fa fa-pencil-square-o fa-2x"></i></button>'+
							'	<button class="btn btn-default btn-xs" type="button"  onclick="eliminar_local('+i+')"><i class="fa fa-trash-o fa-2x"></i></button></td>'+
						'</tr>	';
				html+=fila;
				j++;
    			}
    			html+='<tr>  '+
							'<td colspan="3"> <strong>TOTAL</strong></td>'+
							'<td colspan="2">'+total+'</td>'+
						'</tr>	';

    			$('#tabla-dinamica tbody').html(html);
    			///Se valida que el total sea 500 para poder procesar los puntos
				if (total==500) {
					 $('#btn-guardar-todo').attr("disabled", false);
				} else{
					$('#btn-guardar-todo').attr("disabled", true);
				};
    	}

    	///funciones para manejar datos
		function  addPregunta(){
			var id_factor=$('#factor').val();
			var factor_text=$('#factor option:selected').text();
    		var pregunta=$('#pregunta').val();
    		var ponderacion=$('#ponderacion').val();
			preguntas.push(
			    {id_pregunta:0, pregunta: pregunta, id_factor: id_factor, ponderacion: ponderacion, factor:factor_text}
			);
			
		}

		function delPregunta (id) {
			var temp = new Array();
		for (i=0;i<preguntas.length;i++) {
			if (i!=id) {
					temp.push(preguntas[i]);
			}
		}
			preguntas=temp;
			mostrar_tabla();
		}
		function editPregunta () {
				$('#pregunta').val(preguntas[index].pregunta);
				$('#factor').val(preguntas[index].id_factor);
				$('#ponderacion').val(preguntas[index].ponderacion);
				$('#id_pregunta').val(preguntas[index].id_pregunta);
		}

	mostrar_tabla();



		$('#form-local').bootstrapValidator({
	        message: 'Valor no valido',
            fields: {
                factor: {
                    validators: {
                        notEmpty: {
                            message: 'Debe de seleccionar un factor'
                        }
                    }
                },
                pregunta: {
                    validators: {
                        notEmpty: {
                            message: 'Por favor escriba una pregunta'
                        },
                    	stringLength: {
	                        message: 'Debe ingresar un minimo de 25 caracteres',
	                        min: 25
	                	}
                    }
                },
                ponderacion: {
                    validators: {
                        notEmpty: {
                            message: 'Debe de establecer una ponderación a la pregunta'
                        }
                    }
                }// fin ponderacion
            }
       });

	$('#Form').bootstrapValidator({
	        message: 'Valor no valido',
            fields: {
                nombre: {
                    validators: {
                        notEmpty: {
                            message: 'Debe de seleccionar un factor'
                        },
                    	stringLength: {
	                        message: 'Debe ingresar un minimo de 8 caracteres',
	                        min: 8
	                	}
                    }
                },
                descripcion: {
                    validators: {
                        notEmpty: {
                            message: 'Por favor escriba una pregunta'
                        },
                    	stringLength: {
	                        message: 'Debe ingresar un minimo de 20 caracteres',
	                        min: 20
	                	}
                    }
                }
            }
       });
     </script>


